<template>
	<view>
		<view style="position:fixed;width: 100%;padding-bottom：30rpx;z-index:10" class="bg-white">
			<div style="height:30rpx;background-color: #fff"></div>
			<view :style="{height: statusBarHeight + 'px'}" class="bg-white"></view>
			<Title :title="title" class="bg-white" />
		</view>
		<view style="height:130rpx"></view>
		<u-form
			:model="serviceModel"
			ref="serviceModel"
			class="ml-20 mr-20 formSty"
		>
			<view class="contentBg">
				<!-- <p class="titleSty pt-44">{{$t('评分')}}</p> -->
				<u-form-item
					prop="star"
					:border-bottom="false"
					:required="true"
					:label="$t('评分')"
					label-position="top"
					class="titleSty"
					border
				>
					<view v-for="(item, index) in scoreList" @click="checkStar(item,index)">
						<image v-if = "item.checked" class="ml-45 mt-16 w-50 h-50" src="/static/img/starBright.png"></image>
						<image v-if = "!item.checked" class="ml-45 mt-16 w-50 h-50" src="/static/img/starDark.png"></image>
					</view>
					<p class="scoreNumSty">{{serviceModel.star}}</p>
				</u-form-item>
				
				<!-- <p class="titleSty mt-44">{{$t('评价信息')}}</p> -->
				<u-form-item
					:border-bottom="false"
					prop="content"
					:required="true"
					:label="$t('评价信息')"
					label-position="top"
					class="titleSty"
					style="position: relative;"
				>
					<u-input v-model="serviceModel.content" type="textarea" :placeholder="$t('请填写评价')" :maxlength="1000" :border="true" height="240" :auto-height="true" />
						<p class="text-888 fz24" style="position: absolute; bottom: 30rpx; right: 20rpx;"> {{ remaining }} </p>
				</u-form-item>
				
			
			</view>
		</u-form>
		<view class="empty"></view>
		<view class="footer_btn4">
			<u-button class="btn_blue" :disabled="btnDis" @click="submit">
				{{$t('提交')}}
			</u-button>
		</view>
	</view>
</template>

<script>
	import Title from './components/title.vue'
	import { Shoporderadd_comment } from '@/api/freight.js'
	
	export default {
		components: {
			Title
		},
		data() {
			return {
				title: this.$t('服务评价'),
				btnDis: false,
				orderNo: '',
				statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
				scoreList: [{
					num:"1.0",
					checked: false
					},
					{
					num:"2.0",
					checked: false
					},
					{
					num:"3.0",
					checked: false
					},
					{
					num:"4.0",
					checked: false
					},
					{
					num:"5.0",
					checked: false
					},
				],
				show: false,
				advanCheckList: [],
				userNmae: '',
				serviceModel: {
					user_id: uni.getStorageSync("user_id"),
					star: 0,
					content: ''
				},
				rules: {
					star: [
						{ 
							required: true, 
							message: this.$t('请选择评分'), 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						}
					],
					content: [
						{ 
							required: true, 
							message: this.$t('请填写评价内容'), 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change'],
						}
					],
				},
				showSex: false,
				maxLength: 1000,
			}
		},
		computed: {
		  remaining() {
		    return this.maxLength - this.serviceModel.content.length;
		  },
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.serviceModel.setRules(this.rules)
		},
		onLoad(options) {
			this.orderNo = options.order_id
		},
		methods: {
				submit() {
					this.serviceModel.order_id = this.orderNo
					// return
					this.$refs.serviceModel.validate(valid => {
						if (valid) {
							this.btnDis = true
							uni.showLoading({
								title: this.$t('提交中'),
								mask: true
							});
							Shoporderadd_comment(this.serviceModel).then(res => {
								if(res.data.code == 200) {
									uni.$u.toast(this.$t('提交成功'))
									setTimeout(() => {
										uni.hideLoading()
										uni.redirectTo({
											url: `/pages/shopOrder/order/index?type=1&status=4`,
										})
									}, 500);
								} else {
									// uni.$u.toast(res.data.message)
									uni.$u.toast(res.data[this.plang('message')])
									uni.hideLoading()
								}
								this.btnDis = false
							}).catch(err => {
								this.btnDis = false
								uni.hideLoading()
							})
						} else {
							this.btnDis = false
							uni.$u.toast(this.$t('请检查是否有未上传内容'))
						}
					})
				},
				back() {
					// uni.navigateBack()
					this.cback()
				},
				// 星星选择
				checkStar(item,index) {
					this.serviceModel.star = item.num
					for (const check in this.scoreList) {
						if (check <= index) {
							this.scoreList[check].checked = true
						} else {
							this.scoreList[check].checked = false
						}
					}
				},
		}
	}
</script>

<style lang="scss">
	@import '@/assets/appScss.scss';
	page {
			background: #F6F7FB;
		}
		
		.empty {
			width: 100%;
			height: 200rpx;
		}
		.titleSty {
			color: #0e0e0e;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 600;
			// margin-top: 40rpx;
		}
		.advanBoxSty {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			flex-wrap: nowrap;
			overflow-x: auto;
			margin-top: 24rpx;
			.common {
				width: 168rpx;
				height: 64rpx;
				flex: 0 0 auto;
				border-radius: 500rpx;
				background: #F7F7F7;
				color: #333;
				font-family: "PingFang SC";
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				line-height: center;
				margin-left: 20rpx;
			}
			.common:first-child {
				margin-left: 0;
			}
			.checkedSty {
				border: 1rpx solid #278AFF;
				background: #D7E9FF;
				color: #278AFF;
				font-weight: 600;
			}
		}
		.scoreNumSty {
			color: #FF7E17;
			margin-left: 60rpx;
			font-family: "PingFang SC";
			font-size: 60rpx;
			font-style: normal;
			font-weight: 600;
			// margin-top: 15rpx;
		}
		.inputSty {
			border-radius: 18rpx;
			background-color: #fff;
			line-height: 95rpx;
			e-input {
				float: right;
			}
			/deep/ .uni-input-input {
				text-align: right;
				margin-right: 50rpx;
			}
		}
		/deep/ .u-form-item__body__left__content__label {
			color: #1D1D1D;
			font-family: "PingFang SC";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 600;
		}
			uni-button:after {
				border: none;
			}
			.formSty {
				// padding-bottom: 200rpx;
				/deep/ .u-form-item__body {
					padding: 0;
				}
			}
			.contentBg {
				background-color: #fff;
				padding: 0 24rpx;
				margin-top: 24rpx;
				border-radius: 18px;
				padding-bottom: 34rpx;
				/deep/ .u-icon__icon {
					font-size: 60rpx !important;
				}
				.starSty {
					width: 50rpx;
				}
			}
			.topBg {
				background-color: #fff;
				padding: 0 16rpx;
				margin-top: 24rpx;
				border-radius: 18px;
			}
			.uploadSty {
				/deep/ .u-upload__button {
					border-radius: 16rpx;
				}
			}
			.textareaSty {
				height: 226rpx;
				border-radius: 18rpx;
				border: 2rpx solid #D8D8D8;
				// background: #F7F7F7;
				margin-top: 24rpx;
				text-indent: 18rpx;
				/deep/ .u-textarea__field{
					color: #333;
					font-size: 26rpx;
				}
			}
			.businessSty {
				min-height: 80rpx;
				border-radius: 18rpx;
				background: #F7F7F7;
				color: #333;
				font-family: "PingFang SC";
				font-style: normal;
				font-weight: 400;
				// margin-top: 24rpx;
				// text-indent: 24rpx;
				/deep/ .u-input__content__field-wrapper__field {
					font-size: 26rpx !important;
				}
			}
			
			.badBtn {
				height: 80rpx;
				border-radius: 18px;
				background: #F7F7F7;
				display: flex;
				justify-content: space-between;
			}
		.header {
			font-size: 34rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-weight: bold;
			text-align: center;
			position: relative;
			padding-top: var(--status-bar-height);
		}
		.back {
			position: absolute;
			width: 70rpx;
			height: 70rpx;
			top: 15rpx;
		}
	.footer_btn4{
		position: fixed;
		left:0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		padding:30rpx 24rpx 60rpx;
		.btn_blue{
			width: 97%;
			height: 94rpx;
			flex-shrink: 0;
			border-radius: 18rpx;
			// border: 2rpx solid rgba(3, 189, 130, 0.10);
			background-color: #007AFF;
			color: #FFF;
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-style: normal;
			font-weight: 600;
			text-align: center;
			line-height: 94rpx;
		}
		.btn_item{
			text-align: center;
			padding:0 10rpx;
			.name{
				color: #8C8C8C;
				font-size: 20rpx;
				line-height: 22rpx;
			}
		}
		.ico{
			width: 42rpx;
			height: 42rpx;
		}
	}
	.info_jiesuan{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 18rpx;
		background: #F6F7FB;
		padding:20rpx 24rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 40rpx;
		overflow: hidden;
		.jian{
			color: #FE3E3B;
		}
	}
	.disp_title{
		color: #1D1D1D;
		font-size: 28rpx;
		font-weight: 600;
		line-height: 28rpx;
		padding:24rpx 35rpx 10rpx;
	}
	.bor_bgff{
		margin: 20rpx 24rpx;
		background: #fff;
		border-radius: 20rpx;
	}
	.disp_info{
		padding:0 24rpx 30rpx;
		.title{
			color: #1D1D1D;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 28rpx;
			padding:34rpx 0 24rpx;
		}
		.info_text{
			border-radius: 18rpx;
			background: #F6F7FB;
			padding:20rpx 24rpx;
			color: #333;
			font-size: 26rpx;
			line-height: 40rpx;
			overflow: hidden;
		}
	}
	.item_photo{
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		align-content: flex-start; 
		flex-wrap: wrap;
		gap: 18rpx;
		padding:20rpx 0;
		.ph{
			display: block;
			width: 150rpx;
			height: 150rpx;
			flex-shrink: 0;
			border-radius: 15rpx;
		}
	}
	.guanl_order{
		margin: 20rpx 24rpx;
		height: 96rpx;
		background: #fff;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:0 16rpx 0 24rpx;
		.name{
			font-size: 28rpx;
			line-height: 40rpx;
			font-weight: 600;
		}
		.info{
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			font-weight: 600;
	
		}
	}
</style>
